<template>
	<view class="page">
		<template v-if="type === '1'">
			<view v-if="bankInfo" class="bank_info" @click="toChooseBank" hover-class="tapstate">
				<view class="left">
					<view class="title">{{ bankInfo.bank }}</view>
					<view class="des">尾号{{ bankInfo.bank_no }} 储蓄卡</view>
				</view>
				<uni-icons type="right" size="18" color="#868686"></uni-icons>
			</view>
			<view v-else class="bank_choose" @click="toChooseBank" hover-class="tapstate">
				<view class="tip">亲，请选择本次提现的银行卡</view>
				<uni-icons type="right" size="18" color="#868686"></uni-icons>
			</view>
		</template>
		<view class="input_area">
			<view class="title">提现金额</view>
			<view class="input_c">
				<view class="icon">￥</view>
				<uni-forms class="forms" :modelValue="priceFormData" ref="priceForm" :rules="priceRules"
					label-position="top">
					<uni-forms-item name="price">
						<uni-easyinput @blur="onPriceBlur" v-model="priceFormData.price" type="digit"
							:inputBorder="false" :maxlength="11"
							:placeholder="`每笔金额不得少于${WithdrawalNotice?.min_tx_total || '0.00'}元`" :clearable="false" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="balance">
				<text class="label">可提现余额</text>
				<text class="value">￥{{ WithdrawalNotice.commission || 0 }}</text>
			</view>
		</view>
		<view class="authentication container">
			<view class="title">验证身份</view>
			<uni-forms :modelValue="authenticationFormData" ref="authenticationForm" :rules="authenticationRules">
				<uni-forms-item name="name" label="真实姓名">
					<uni-easyinput v-model="authenticationFormData.name" trim="all" placeholder="请填写您的真实姓名" />
				</uni-forms-item>
				<uni-forms-item name="phone" label="手机号码">
					<uni-easyinput v-model="authenticationFormData.phone" placeholder="请输入手机号码" type="number"
						:maxlength="11" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="notice">
			<view class="important">*提现须知</view>
			<view class="list">1、提现方式-微信是线上到账；银行卡是线下打款；</view>
			<view class="list">
				2、提现手续费
				<text class="important">{{ WithdrawalNotice?.server_charge }}%</text>；
			</view>
			<view class="list">
				3、最小提现额度
				<text class="important"> {{ WithdrawalNotice?.min_tx_total }} </text>元，最大提现额度
				<text class="important"> {{ WithdrawalNotice?.max_tx_total }} </text>元。
			</view>
			<view v-if="WithdrawalNotice?.info" class="list">
				4、{{ WithdrawalNotice?.info }}
			</view>
		</view>
	</view>
	<fixed-button @touch="confirmWithdrawal" :loading="buttonLoading" :disabled="buttonLoading">立即提现</fixed-button>
</template>

<script setup>
	import { ref, reactive, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import request from '@/utils/common/request/index';
	import { useCacheStore } from '@/store/modules/useCacheStore';
	import { formatterPrice, sleep } from '@/utils/common/index';
	import { useGetThemColor } from '@/hooks/useGetThemColor';


	const { secondaryColor } = useGetThemColor();
	let type = ref(''); //0--微信   1--银行卡
	const cacheStore = useCacheStore();
	const bankInfo = computed(() => {
		return cacheStore.bankStorage;
	});
	onLoad(options => {
		type.value = options.type;
		uni.setNavigationBarTitle({
			title: `提现至${type.value==='0'?'微信':'银行卡'}`
		})
	});

	// * 获取提现说明
	let WithdrawalNotice = ref({});
	request({
		url: '/api/ytx',
		loadingTip: '加载中'
	}).then(data => {
		WithdrawalNotice.value = data;
		if (type.value === '1' && data.default_bank) {
			cacheStore.setStorageData({
				data: data.default_bank,
				field: 'bankStorage',
			})
		}
	});


	// * 表单数据
	const priceForm = ref(null);
	let priceFormData = reactive({
		price: '',
	});
	const authenticationForm = ref(null);
	let authenticationFormData = reactive({
		name: '',
		phone: '',
	});

	// * 校验规则
	const priceRules = {
		price: {
			rules: [{
				required: true,
				errorMessage: '提现金额不能为空'
			}]
		},
	};
	const authenticationRules = {
		name: {
			rules: [{
				required: true,
				errorMessage: '姓名不能为空'
			}]
		},
		phone: {
			rules: [{
				required: true,
				errorMessage: '电话不能为空'
			}, {
				validateFunction: function(rule, value, data, callback) {
					if (value.length !== 11) {
						callback('手机号码输入有误')
					}
					return true
				}
			}]
		}
	};

	const onPriceBlur = (e) => {
		priceFormData.price = formatterPrice(e.detail.value);
	}

	// * 确认提现
	let buttonLoading = ref(false);
	const confirmWithdrawal = async () => {
		if (type.value === '1') {
			if (!bankInfo.value) return uni.showToast({
				title: '请选择银行卡',
				icon: "none"
			});
		}

		// * 验证提现金额
		try {
			await priceForm.value.validate();
		} catch (e) {
			return;
		}


		if (Number(priceFormData.price) > WithdrawalNotice.commission) return uni.showToast({
			title: '可提现余额不足',
			icon: "none"
		});
		if (Number(priceFormData.price) > Number(WithdrawalNotice.value?.max_tx_total))
			return uni.showToast({
				title: `最多可提现${WithdrawalNotice.value?.max_tx_total}元`,
				icon: "none"
			});
		if (Number(priceFormData.price) < Number(WithdrawalNotice.value.min_tx_total))
			return uni.showToast({
				title: `最少提现${WithdrawalNotice.value.min_tx_total}元`,
				icon: "none"
			});


		// * 验证信息
		try {
			await authenticationForm.value.validate();
		} catch (e) {
			return;
		}
		buttonLoading.value = true;

		let reqData = {
			code: WithdrawalNotice.value.code,
			app_total: priceFormData.price,
			account_type: Number(type.value) + 1,
			name: authenticationFormData.name,
			tel: authenticationFormData.phone,
			// #ifdef H5
			register_channel: 2,
			// #endif
			// #ifdef MP-WEIXIN
			register_channel: 1,
			// #endif
		};

		if (type.value === '1') {
			reqData.bank_id = bankInfo.value.bank_id;
		}

		request({
			url: '/api/ljtx',
			method: "POST",
			data: reqData
		}).then(async () => {
			uni.showToast({
				title: '提现申请成功',
				mask: true
			})
			await sleep(600);
			uni.redirectTo({
				url: '/pages/withdrawal-record/withdrawal-record'
			});
		}).finally(() => {
			buttonLoading.value = false;
		});
	};

	const toChooseBank = () => {
		uni.navigateTo({
			url: "/pages/bank/bank?choose=true"
		});
	}
</script>

<style scoped lang="scss">
	.bank_info {
		margin-bottom: 12px;
		display: flex;
		align-items: center;
		padding: 12px 14px;
		background-color: #fff;
		border-radius: 10px;

		.left {
			flex: 1;
			padding-right: 10px;

			.title {
				color: #121314;
			}

			.des {
				margin-top: 4px;
				font-size: 12px;
				color: #868686;
			}
		}
	}

	.bank_choose {
		margin-bottom: 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 14px;
		background-color: #fff;
		border-radius: 10px;
	}

	.input_area {
		margin-bottom: 12px;
		padding: 14px 14px 0;
		background-color: #fff;
		border-radius: 10px;

		.title {
			font-size: 16px;
			font-weight: bold;
			color: #121314;
		}

		.input_c {
			display: flex;
			margin: 22px 0 16px;

			.icon {
				font-size: 30px;
				color: #121314;
			}

			.forms {
				flex: 1;
			}

			::v-deep .uni-forms-item__label {
				display: none !important;
			}

			::v-deep .uni-easyinput__content {
				margin-top: 3px;
			}

			::v-deep .uni-input-placeholder,
			::v-deep .uni-input-input {
				font-size: 16px !important;
			}

		}

		.balance {
			display: flex;
			justify-content: space-between;
			padding: 12px 0;
			border-top: 1px solid #f6f6f6;

			.label {
				color: #999;
			}

			.value {
				font-weight: bold;
				color: v-bind(secondaryColor);
			}
		}
	}

	.authentication {
		border-radius: 10px;
		background-color: #fff;
		overflow: hidden;

		.title {
			margin-bottom: 14px;
			padding: 10px 0;
			font-weight: bold;
			color: #121314;
			border-bottom: 1px solid #f6f6f6;
		}

		::v-deep .uni-forms-item__label {
			flex-shrink: 0 !important;
			width: 70px !important;
			padding: 0 !important;
		}
	}

	.notice {
		margin-top: 10px;
		padding-bottom: 10px;
		font-size: 14px;
		color: #121314;

		.important {
			color: red;
		}

		.list {
			line-height: 24px;
		}
	}
</style>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>